<template>
  <el-dialog v-model="dialogVisible" title="选取图片" width="80%" :before-close="handleClose" append-to-body>
    <el-card class="box-card" shadow="never">
      <template #header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索关键词">
            <el-input v-model="formInline.keywords" placeholder="请输入关键词" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="init">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <div class="table">
        <el-table :data="tableData.list" @select="handleSelectionChange" ref="tableRef" max-height="50vh">
          <el-table-column type="selection" />
          <el-table-column prop="name" label="图片名称" />
          <el-table-column prop="album" label="相册" />
          <el-table-column prop="category" label="分类" />
          <el-table-column prop="tags" label="标签" />
          <el-table-column prop="address" label="预览" header-align="center" align="center">
            <template #default="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.url" />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="创建时间">
            <template #default="scope">
              {{proxy.$utils.dateTimeFormateFn(scope.row.create_time*1000)}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="更新时间">
            <template #default="scope">
              {{proxy.$utils.dateTimeFormateFn(scope.row.update_time*1000)}}
            </template>
          </el-table-column>
        </el-table>

        <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.page" v-model:limit="formInline.limit" @pagination="getInfo" />
      </div>
    </el-card>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
const { proxy } = getCurrentInstance();
let formInline = ref({
  page: 1,
  limit: 10,
  keywords: "",
  album: 0,
  cate: 0,
});
let dialogVisible = ref(false);
let tableData = ref({});
let selectArr = [];
let handleClose = () => {
  selectArr = [];
  dialogVisible.value = false;
};
let search = async () => {
  formInline.value.page = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.vaultImages(formInline.value);
  if (selectArr.length) {
    let arr = proxy.$utils.extractCommonField(
      tableData.value.list,
      selectArr,
      "id"
    );
    nextTick(() => {
      arr.forEach((row) => {
        proxy.$refs.tableRef!.toggleRowSelection(row, undefined);
      });
    });
  }
};
let open = async () => {
  await search();
  dialogVisible.value = true;
};
let init = () => {
  formInline.value = {
    page: 1,
    limit: 20,
    keywords: "",
    album: 0,
    cate: 0,
  };
  getInfo();
};
const handleSelectionChange = (selection, row) => {
  //新增
  if (proxy.$utils.isFieldEqual(selection, "id", row.id)) {
    selectArr.push(row);
  } else {
    //删除
    let index = proxy.$utils.findIndexByField(selection, "id", row.id);
    selectArr.splice(index, 1);
  }
};
let save = () => {
  emit("update:modelValue", selectArr);
  handleClose();
};

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue && newValue.length) selectArr = [...newValue];
  },
  { immediate: true, deep: true }
);
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
</style>
